<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<link rel="stylesheet" href="../static/css/nav.css" th:href="@{/css/nav.css}">
<link rel="stylesheet" href="../static/css/thoughtMainPageDetail.css" th:href="@{/css/thoughtMainPageDetail.css}">
<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav">

</div>
<div class="comment-item comment-item-content" style="padding-top: 48px;">
    <div class="comment-user" >
        <img src="../static/img/MAIN1745029614799D06DXIC3XL.jpg" alt="用户头像" class="avatar" th:src="${user.avatar}">
        <span class="username" th:text="${user.username}">DRUNK.</span>
        <span th:text="${user.bio}"></span>
        <button class="follow-button" th:value="${user.id}" >+ 关注</button>
    </div>

    <div class="comment-content">
        <p th:text="${thought.title}" class="content-title"></p>
        <p th:text="${thought.content}">说实话，这九个出道位，只有蔡两王和尤是真正有实力的，其他的我只能说可惜那些没能出道的人了，比如灵超毕雯珺朱星杰，外形实力都更适合，还有自己的特点</p>
        <span class="comment-time" th:text="${thought.createTime}" style="margin-right: 10px">2周前·陕西</span>
        <span class="comment-time"><span class="comment-time" th:text="${user.followerCount}">2周前·陕西</span>粉丝</span>
    </div>

</div>
<script th:inline="javascript">
    let posts = [[${thought}]];
    let user = [[${user}]];
    let postsNum = [[${postsNum}]];
    let thoughtNum = [[${thoughtNum}]];
    let fansNum = [[${fansNum}]];
    let isFollowing = [[${isFollowing}]];
    console.log(posts)
    console.log(user)
    console.log(postsNum)
    console.log(thoughtNum)
    console.log(fansNum)
    console.log(isFollowing)

    let follow_button = document.querySelector('.follow-button');
    if(isFollowing){
        follow_button.classList.add('following');
        follow_button.textContent = '取消关注';
    }
    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    let errorMessage = [[${errorMessage}]];

    if (errorMessage && errorMessage !== '') {
        showCustomAlert(errorMessage, 3000);
    }
 </script>
<script src="../static/js/video.js" th:src="@{/js/video.js}"></script>
<script src="../static/js/thoughtMainPageDetail.js" th:src="@{/js/thoughtMainPageDetail.js}"></script>
</body>
</html>